<template>
  <div id="divbox">
    <!-- 【此图像是圆圈头像logo】 -->
    <img src="https://i02piccdn.sogoucdn.com/e99e2538b1bf4686" alt="Your Image">
    <div class="login-form">
      <div id="logo">
        <span
          style="display: block; font-family: 'Microsoft YaHei';letter-spacing: 0.5px; font-weight: bold; font-size: 40px; text-align: center;">
          &nbsp; 欢迎登录
        </span>
      </div>
      <el-form :rules="rules" ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" class="input"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" class="input"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()" style="width: 300px;">登录</el-button>
          <br />
          <span style="color: #006A5A;" @click="reg()" >没有账号？点击注册</span>
        </el-form-item>
      </el-form>
    </div>


  </div>
</template>

<script>
import { login } from '@api/pagehotel'
import axios from 'axios'
export default {
  data() {
    return {
      form: {
        username:'',
        password: '',
      },
      rules: {
        account: [{
          required: true,
          message: '请输入账户名称！',
          trigger: 'blur'
        },
        {
          min: 3,
          max: 10,
          message: '长度在 3 到 10 个字符',
          trigger: 'blur'
        }
        ],
        password: [{
          required: true,
          message: '请输入账户密码！',
          trigger: 'blur'
        },
        {
          min: 3,
          max: 10,
          message: '长度在 3 到 10 个字符',
          trigger: 'blur'
        }
        ]
      },
      id:1
    }
  },
  methods: {
    refrech(){
      getid(this.id).then(res => {
      console.log(res.data);
    })
    },
    reg() {
      this.$router.push({name:'register'})
    },
    onSubmit() {//【登录】
      if (this.form.username.length < 3 || this.form.username.length > 10) {
        this.$message({ showClose: true, message: '账户名称长度在 3 到 10 个字符~', type: 'error' });
      }else if(this.form.password.length < 3 || this.form.password.length > 10){
        this.$message({ showClose: true, message: '账户密码长度在 3 到 10 个字符~', type: 'error' });
      } else {
        login(this.form).then(res => {
          sessionStorage.setItem("token",res.data);
          console.log(res);
          if(res.code==1){
            this.$message({ showClose: true, message: '恭喜你，账户正确✔', type: 'success' });
            sessionStorage.setItem("userId",res.map.userId)
            this.$router.push({name:'BigPage'})
          }else{
            this.$message({ showClose: true, message:res.msg, type: 'success' });
          }
        })
      }
    }
  },
  mounted(){}
}
</script>

<style>
#divbox {
  width: 100%;
  height: 100vh;
  background-image: url("https://p0.itc.cn/images01/20201229/ca023ba149a1421fb839715378987131.jpeg");
  /*将🎀页面背景  图片路径替换为你自己的图片路径*/
  background-size: cover;
  /*保持图片比例并完全覆盖元素*/
  background-position: center center;
  /*将图片居中对齐*/
}

.login-form {
  width: 442px;
  height: 400px;
  background-color: rgba(248, 242, 235, 0.5);
  position: relative;
  left: 515px;
  top: 170px;
  padding-top: 20px;


}

#logo {
  width: 100%;
  height: 60px;
  /* background-color: aquamarine; */
  margin-bottom: 40px;
}

.input {
  max-width: 300px;
}

img {
  border-radius: 50%;
  width: 100px;
  position: absolute;
  left: 680px;
  top: 50px;
}
</style>
